import React, { useCallback, useEffect, useState } from "react";
import { lbapi } from "../../request/api";
import { Button, Space, Table, Drawer } from "antd";
import type { TableProps } from "antd";

import type { FormProps } from "antd";
import { Checkbox, Form, Input } from "antd";
import "./home.module.css";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import type { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
function Index() {
  // 总共条数
  let [total, settotal] = useState<number>(0);
  // 列表数据
  let [sjdata, setsjdata] = useState<DataType[]>([]);
  // 页码
  const [page, setpage] = useState<number>(1);
  // 每页条数
  const [pageSize, setpageSize] = useState<number>(10);
  // // 搜索标题
  let [keyword, setkeyword] = useState<any>(undefined);
  // // 搜索标签
  let [tag, settag] = useState<any>(undefined);
  // 抽屉名称
  let [draname, setdraname] = useState("");
  // 列表
  let fun = useCallback(() => {
    lbapi({ page, pageSize, keyword, tag }).then((res) => {
      console.log("lb", res);
      if (res.status == 200) {
        setsjdata(res.data.rows);
      }
    });
  }, [page, pageSize]);
  useEffect(() => {
    fun();
  }, [fun]);
  // 搜索
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  // 查看
  let see = (id) => {
    console.log("see", id);
    setOpen(true);
    setdraname("查看");
  };
  // 删除
  let del = (id) => {
    console.log("see", id);
    
  };
  // 修改
  let edit = () => {
    setOpen(true);
    setdraname("修改");
  };
  // ---------------------------------------------------
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
     
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
       render: (text) => <p dangerouslySetInnerHTML={{__html:text}}></p>
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "更新时间",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => see(record.id)}>
            查看
          </Button>
          <Button type="primary" onClick={() => del(record.id)}>
            删除
          </Button>
          <Button type="primary" onClick={() => edit(record)}>
            修改
          </Button>
        </Space>
      ),
    },
  ];
  // 抽屉
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  // ----------------------------------------------------------------
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // const [editor, setEditor] = useState(null)                   // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState("");

  

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: "请输入内容...",
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  return (
    <div>
      {/* 抽屉 */}
      <Drawer
        title={draname}
        closable={{ "aria-label": "Close Button" }}
        onClose={onClose}
        open={open}
      >
        <p>Some contents...</p>
        <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc' }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: '300px', overflowY: 'hidden' }}
        />
      </div>
    
      </Drawer>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ display: "flex" }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="搜索"
          name="username"
          rules={[{ required: true, message: "请输入搜索内容" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table<DataType> columns={columns} dataSource={sjdata} rowKey="id" />
    </div>
  );
}

export default Index;
